<template>
  <div class="description">
    <div class="title">备注:</div>
    <div v-if="debug" class="description-wrapper">
      <n-input
        :readonly="readonly"
        v-if="descriptionType == 0 || descriptionType == 2"
        style="flex: 1; width: 100%"
        placeholder=""
        :value="descriptionTip"
        :disabled="false"
        type="textarea"
      ></n-input>
      <OssUpload
        :model-value="defaultFiles"
        v-if="descriptionType == 1 || descriptionType == 2"
        :show-remove-button="false"
        :show-trigger="false"
        disabled
        :on-download="() => false"
        :on-preview="() => false"
      >
      </OssUpload>
    </div>
    <div v-else class="description-wrapper">
      <n-input
        v-if="descriptionType == 0 || descriptionType == 2"
        style="flex: 1; width: 100%"
        v-model:value="formData.description"
        :placeholder="descriptionTip"
        :disabled="false"
        type="textarea"
        :readonly="readonly"
      ></n-input>
      <OssUpload
        v-model="formData.files"
        v-if="descriptionType == 1 || descriptionType == 2"
      >
        <n-button v-if="!readonly" type="primary" secondary
          >上传文件(不能超过{{ descriptionFileSize }}MB,支持格式为:
          {{ descriptionFileType?.join() }})</n-button
        >
      </OssUpload>
      <div
        v-if="formStore.selectComponent().props.defaultFiles.length > 0"
        style="display: flex; align-items: center"
      >
        <div class="title" style="margin-top: 30px">默认文件</div>
        <OssUpload
          v-model="formStore.selectComponent().props.defaultFiles"
          v-if="descriptionType == 1 || descriptionType == 2"
        >
        </OssUpload>
      </div>
      <!-- <n-upload
        action="https://xunjinasd.oss-cn-hangzhou.aliyuncs.com"
        v-model:value="formData.files"
        v-if="descriptionType == 1 || descriptionType == 2"
        :on-before-upload="handleBeforeUpload"
        :data="params"
        :on-finish="handleUploadFinish"
      >
        <n-button v-if="!readonly" type="primary" secondary
          >上传文件(不能超过{{ descriptionFileSize }}MB,支持格式为:
          {{ descriptionFileType?.join() }})</n-button
        >
      </n-upload> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useFormStore } from "@/store/form";
import OssUpload from "@/components/upload/index.vue";
import { getUploadparams, uploadOssApi, addSpace } from "@/api/upload";
import { v1 } from "uuid";
const formStore = useFormStore();
const props = defineProps({
  descriptionTip: String,
  descriptionType: Number,
  descriptionFileSize: Number,
  descriptionFileType: Array<String>,
  debug: Boolean,
  defaultFiles: Array<any>,
  prop: String,
  readonly: Boolean,
});
const params = ref({});
const formData = computed({
  get() {
    return formStore.submitInfo[props.prop];
  },
  set(val) {
    formStore.submitInfo[props.prop] = val;
  },
});
const getExtension = (fileName: string) => {
  const lastDotIndex = fileName.lastIndexOf(".");

  // 检查是否有后缀名
  return lastDotIndex >= 0 ? fileName.substring(lastDotIndex + 1) : "";
};
const handleBeforeUpload = async ({ file }) => {
  const paramsData = await getUploadparams();
  console.log(paramsData, file);

  params.value = {
    ...paramsData["data"],
    key: `qa/${v1()}.${getExtension(file.name)}`,
  };
  // console.log(file);
  return true;
};

const handleUploadFinish = ({ file }) => {
  console.log(`upload finish`, file);
  addSpace(params.value["host"], params.value["key"], file);
  // formData.value.files.push({
  //   url: `${params.value["host"]}/${params.value["key"]}`,
  // });
};
</script>

<style lang="scss" scoped>
.title {
  width: 70px;
}
.description {
  display: flex;
  .description-wrapper {
    width: 100%;
    .n-input {
      margin-bottom: 12px;
    }
  }
}
</style>
